<template>
	<view v-if="shopInfo">
		<view class="banner">
			<swiper class="bai" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="bai" v-for="(item,i) in shopInfo.zhuimages" :key="i">
					<image @tap="openImg(tool.img(item))" class="bai" :src="tool.img(item)" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view class="name">
				{{ shopInfo.name }}
			</view>
			<view class="idcr">
				<!-- <text v-for="(items,index) in shopInfo.gui" :key="index">
					{{ items.name }}
					<text v-if="index != shopInfo.gui.length - 1">，</text>
				</text> -->
			</view>
		</view>
		<view class="shop-item">
			<view class="shop-price">
				<view class="new_money">
					<text style="font-size: 24rpx;">￥</text><text>{{ shopInfo.gui[0].price }}</text>
				</view>
				<view class="old_money">
					<text>￥</text><text>{{ shopInfo.gui[0].oldprice }}</text>
				</view>
			</view>
			<view class="shop-num">
				已售：{{ shopInfo.xiao }}件
			</view>
		</view>
		<view class="shop-details">
			<view class="d-title">
				商品详情
			</view>
			<view class="shop-rich">
				<u-parse :content="shopInfo.content"></u-parse>
			</view>
			<view class="block">

			</view>
		</view>
		<view class="shop-footer">
			<view class="footer-left">
				<view class="footer-item" @tap="GoIndex">
					<view class="footer-icon">
						<u-icon name="home-fill" color="#555555" size="24"></u-icon>
					</view>
					<view class="footer-name">
						首页
					</view>
				</view>
				<view class="footer-item" @tap="Gokefu">
					<view class="footer-icon">
						<u-icon name="server-fill" color="#555555" size="24"></u-icon>
					</view>
					<view class="footer-name">
						客服
					</view>
				</view>
				<!-- 	<view class="footer-items" style="height: 100%;">
					<button open-type="contact">
						<view class="footer-icon" style="padding-top: 18rpx;">
							<u-icon name="server-fill" color="#555555" size="24"></u-icon>
						</view>
						<view class="footer-name">
							<view style="font-size: 26rpx;width: 100%;position: relative;top: -8rpx;">客服</view>
						</view>
					</button>
				</view> -->
				<!-- <view class="footer-item" @tap="PostShow">
					<view class="footer-icon">
						<u-icon v-if="showFlag" name="star-fill" color="#ff5502" size="24"></u-icon>
						<u-icon v-else name="star-fill" color="#555555" size="24"></u-icon>
					</view>
					<view class="footer-name">
						收藏
					</view>
				</view> -->
			</view>
			<view class="footer-right">
				<view class="buy" @tap="buy">
					立即购买
				</view>
			</view>
		</view>
		<u-popup round="10" :show="couponShow" mode="bottom" @close="couponclose" @open="couponopen">
			<view class="coupon-box">
				<view class="coupon-title">
					请选择优惠券
				</view>
				<view class="coupon-list">
					<u-radio-group activeColor="#ff5502" v-model="radiovalue1" placement="column" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '20px'}" v-for="(item, index) in couponList" :key="index"
							:label="item.name" :name="item.name" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>
				<view class="coupon-bottom">
					<view class="coupon-btn">
						确认选择
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup round="10" :show="specificationsShow" mode="bottom" @close="specificationsclose"
			@open="specificationsopen">
			<view class="specifications-box">
				<view class="sp-box">
					<view class="sp-left">
						<image :src="tool.img(guiInfo.image)" mode=""></image>
					</view>
					<view class="sp-right">
						<view class="sp-title">
							{{ shopInfo.name }}
						</view>
						<view class="sp-ds">
							{{ guiInfo.name }}
						</view>
						<view class="sp-idcr">
							<view class="sp-prcie">
								<text style="font-size: 22rpx;color: #ff5502;">￥</text>
								<text
									style="color: #ff5502;font-weight: bold;font-size: 30rpx;">{{ guiInfo.price }}</text>
							</view>
							<view class="sp-kc">
								库存{{ guiInfo.ku }}件
							</view>
						</view>
					</view>
				</view>
				<scroll-view class="gui-box" style="height: 600rpx;" :scroll-y="true">
					<view class="sp-gui" style="margin-top: 20rpx;">
						<view class="gui-name">
							规格
						</view>
						<view class="gui-list">
							<view class="gui-item" :class="guiIndex == i?'guiclass':''" v-for="(item,i) in shopInfo.gui"
								:key="i" @tap="chouseGui(item,i)">
								{{ item.name }}
							</view>
						</view>
					</view>

					<view class="" style="width: 100%;height: 120rpx;">

					</view>
				</scroll-view>
				<view class="sp-footer">
					<view class="footer-lefts" @tap="addcar">
						加入购物车
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup round="10" :show="guishow" mode="bottom" @close="guiclose" @open="guiopen">
			<view class="specifications-box" style="min-height: 900rpx;">
				<view class="sp-box">
					<view class="sp-left">
						<image :src="tool.img(guiInfo.image)" mode=""></image>
					</view>
					<view class="sp-right">
						<view class="sp-title">
							{{ shopInfo.name }}
						</view>
						<view class="sp-ds">
							{{ guiInfo.name }}
						</view>
						<view class="sp-idcr">
							<view class="sp-prcie">
								<text style="font-size: 22rpx;color: #ff5502;">￥</text>
								<text
									style="color: #ff5502;font-weight: bold;font-size: 30rpx;">{{ guiInfo.price }}</text>
							</view>
							<view class="sp-kc">
								库存{{ guiInfo.ku }}件
							</view>
						</view>
					</view>
				</view>
				<scroll-view class="gui-box" style="height: 300rpx;" :scroll-y="true">
					<view class="sp-gui" style="margin-top: 20rpx;">
						<view class="gui-name">
							规格
						</view>
						<view class="gui-list">
							<view class="gui-item" :class="guiIndex == i?'guiclass':''" v-for="(item,i) in shopInfo.gui"
								:key="i" @tap="chouseGui(item,i)">
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="sp-number">
						<view class="num-name">
							数量
						</view>
						<view class="num-num">
							<u-number-box v-model="num" @change="numChange" :disabledInput="true" :min="1"
								:max="100"></u-number-box>
						</view>
					</view>
				</scroll-view>
				<view class="sp-footer">
					<view class="footer-rights" @tap="submitBuy">
						立即购买
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import tool from '@/utils/tool.js'
	export default {
		data() {
			return {
				num: 1,
				xname: '',
				guishow: false,
				showFlag: false, //商品收藏
				guiInfo: '',
				tool: tool,
				shopInfo: '', //书籍信息
				guiList: [{
					"name": "人教版",

				}, {
					"name": "普通版"
				}],
				specificationsShow: false,
				couponShow: false,
				couponList: [{
						"name": "不使用优惠券"
					}, {
						"name": "满50减4优惠券"
					},
					{
						"name": "满30减2优惠券"
					},
					{
						"name": "满10减1优惠券"
					}
				],
				gui_id: '',
				guiIndex: 0,
				banji: '',
				banIndex: -1,
			}
		},
		onLoad(options) {
			this.id = options.id
			this.GetDetails()
		},
		onShareAppMessage(res) {
			return {
				title: this.shopInfo.name,
				path: 'pages/book/index?id=' + this.id,
				imageUrl: this.tool.img(this.shopInfo.zhuimages[0]),
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.shopInfo.name,
				path: 'pages/book/index?id=' + this.id,
				imageUrl: this.tool.img(this.shopInfo.zhuimages[0]),
			}
		},
		methods: {
			Gokefu() {
				uni.navigateTo({
					url: '/pages/my/kf'
				})
			},
			chouseBan(item, i) {
				this.banIndex = i
				this.banji = item.name
			},
			addcar() { //加入购物车  
				if (!this.xname) {
					uni.showToast({
						title: '请填写学生姓名',
						icon: 'none'
					})
					return
				}
				if (this.shopInfo.banjson.length != 0 && this.banIndex == -1) {
					uni.showToast({
						title: '请选择班级',
						icon: 'none'
					})
					return
				}
				this.$http.Post('uter/gouAdd', {
					zgui_id: this.guiInfo.id,
					banji: this.banji,
					xname: this.xname
				}, (result) => {
					uni.showToast({
						title: result.msg,
						icon: 'success'
					})
					this.specificationsShow = false
				})
			},

			GetDetails() { //获取商品详情
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('zter/listInfo', {
					shop_id: this.id
				}, (result) => {
					uni.hideLoading()
					this.shopInfo = result.data
					this.guiInfo = this.shopInfo.gui[0]
					if (this.shopInfo.cang != null) { //判断商品是否收藏
						this.showFlag = true
					} else {
						this.showFlag = false
					}
				})
			},
			submitBuy() {
				this.$http.Post('order/shopPay', {
					gui_id: this.guiInfo.id,
					num: this.num,
					banji: this.banji,
					xname: this.xname
				}, (result) => {
					if (result.code == 1) {
						uni.navigateTo({
							url: '/pages/buy/index?id=' + result.data.id
						})
					}
				})
			},
			chouseGui(item, i) {
				this.guiInfo = item
				this.guiIndex = i
			},
			PostShow() { // 收藏 or 取消收藏
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('zpor/coladd', {
					zlist_id: this.id
				}, (result) => {
					uni.hideLoading()
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
					this.showFlag = !this.showFlag
				})
			},
			GoIndex() { //回到首页
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			AddCar() { //加入购物车
				this.specificationsShow = true
			},
			specificationsclose() {
				this.specificationsShow = false
			},
			specificationsopen() {
				this.specificationsShow = true
			},
			couponclose() {
				this.couponShow = false
			},
			couponopen() {
				this.couponShow = true
			},
			ChouseCoupon() {
				this.couponShow = true
			},
			openImg(img) {
				this.tool.ClickImg(img)
			},
			guiclose() {
				this.guishow = false
			},
			guiopen() {
				this.guishow = true
			},
			buy() {
				this.guishow = true
			},
			numChange(e) {
				console.log(e)
				this.num = e.value
			},

		}
	}
</script>

<style>
	.banner {
		width: 100%;
		height: 700rpx;
	}

	.bai {
		width: 100%;
		height: 100%;
	}

	.content {
		padding: 25rpx 35rpx;
		background-color: #fff;
	}

	.name {
		font-weight: bold;
		font-size: 32rpx;
		padding-bottom: 20rpx;
	}

	.idcr {
		font-size: 28rpx;
		color: #999;
	}

	.shop-item {
		margin-top: 10rpx;
		padding: 25rpx 35rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop-price {
		display: flex;
		align-items: flex-end;
	}

	.new_money {
		color: #ff5502;
		font-weight: bold;
		font-size: 32rpx;
	}

	.old_money {
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #999;
		text-decoration: line-through #999;
	}

	.shop-num {
		font-size: 28rpx;
		color: #999;
	}

	.shop-name {
		width: 15%;
		font-size: 28rpx;
		color: #999;
	}

	.shop-content {
		font-size: 28rpx;
		color: #333;
		width: 85%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.shop-details {
		margin-top: 10rpx;
		background-color: #fff;
	}

	.d-title {
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		padding: 40rpx 0 20rpx 0;
	}

	.shop-rich {
		width: 94%;
		margin: 20rpx auto;
	}

	.shop-rich>image {
		width: 100%;
	}

	.block {
		width: 100%;
		height: 150rpx;
	}

	.shop-footer {
		border-top: 1rpx solid #f2f2f2;
		position: fixed;
		height: 120rpx;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.footer-left {
		width: 40%;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.footer-item {
		width: 48%;
		height: 100%;
	}

	.footer-icon {
		width: 100%;
		height: 60%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer-name {
		font-size: 26rpx;
		color: #333;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.footer-right {
		width: 80%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.join {
		width: 48%;
		height: 80rpx;
		border-radius: 999rpx;
		background-color: #f9fd08;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #3c3c3c;
	}

	.buy {
		border-radius: 999rpx;
		width: 98%;
		height: 80rpx;
		display: flex;
		background-color: #ff5502;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
	}

	.coupon-box {
		width: 100%;
		height: 700rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
	}

	.coupon-title {
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		padding: 20rpx 0;
	}

	.coupon-list {
		padding: 25rpx 35rpx;
	}

	.c-list {
		padding: 20rpx 0;
	}

	.coupon-bottom {
		position: absolute;
		bottom: 20rpx;
		width: 100%;
		height: 90rpx;
	}

	.coupon-btn {
		margin: 0 auto;
		width: 90%;
		height: 100%;
		border-radius: 999rpx;
		background-color: #fc6766;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
	}

	.specifications-box {
		width: 100%;
		/* height: 700rpx; */
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
	}

	.sp-box {
		width: 94%;
		margin: 20rpx auto;
		display: flex;
		position: relative;
	}

	.sp-left {
		width: 30%;
		height: 200rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.sp-left>image {
		border-radius: 12rpx;
		width: 190rpx;
		height: 190rpx;
	}

	.sp-right {
		width: 70%;
		height: 200rpx;
		position: relative;
	}

	.sp-title {
		font-weight: bold;
		line-height: 45rpx;
		font-size: 30rpx;
	}

	.sp-ds {
		margin-top: 5rpx;
		font-size: 28rpx;
		color: #999;
	}

	.sp-idcr {
		position: absolute;
		bottom: 5rpx;
		font-size: 28rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.sp-footer {
		height: 90rpx;
		position: absolute;
		bottom: 80rpx;
		width: 96%;
		display: flex;
		margin-left: 2%;
	}

	.footer-lefts {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		background-color: #555555;
		border-radius: 999rpx;
	}

	.footer-rights {
		border-radius: 999rpx;
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		background-color: #ff5502;
	}

	.sp-number {
		color: #333;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 94%;
		margin: 20rpx auto 0 auto;
	}

	button {
		background-color: #fff;
		border: none;
		display: flex;
		flex-wrap: wrap;
	}

	button::after {
		border: none;
	}

	.gui-name {
		color: #3c3c3c;
		font-size: 28rpx;
	}

	.sp-gui {
		width: 94%;
		margin: 0 auto;
	}

	.gui-list {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.gui-item {
		margin-right: 20rpx;
		background-color: #f4f4f4;
		color: #333;
		border-radius: 999rpx;
		font-size: 24rpx;
		padding: 10rpx 35rpx;
		margin-bottom: 20rpx;
	}

	.guiclass {
		background-color: #ff5502;
		color: #fff;
	}
</style>